<template>
  <div >
    <!-- v-model="showDrawer"  -->
    <el-drawer 
      v-model="showDrawer"
      :title="title" 
      :size="size" 
      :close-on-click-modal="false"
      :destroy-on-close="destroyOnClose"
    >
      <div class="fromDrawer">
        <div class="body">
          <slot></slot>
        </div>
        <div class="actions">
          <el-button type="primary" @click="submit" :loading="loading">{{ confirmText }}</el-button>
          <el-button type="default" @click="close">取消</el-button>
        </div>
      </div>
    </el-drawer>
  </div>
  
</template>

<script lang='ts' setup>

const props = defineProps({
  title: String,
  size:{
    type: String,
    default: '45%'
  },
  destroyOnClose:{
    type: Boolean,
    default: false
  },
  confirmText:{
    type: String,
    default: '提交'
  },
  // confirmText:{
  //   type: String,
  //   default: '提交'
  // },

})

const showDrawer = ref(false)
// 打开
const open = () => {
  showDrawer.value = true
}
// 关闭
const close = () => {
  showDrawer.value = false
}
// 提交
const emit = defineEmits(['submit'])
const submit = () => emit('submit')

// submit loading
const loading = ref(false)
const showLoading = () => loading.value = true
const hideLoading = () => loading.value = false

// 向父组件暴露方法
defineExpose({
  open, close, showLoading, hideLoading
})



</script>

<style scoped lang="less">
.fromDrawer{
  width: 100%;
  height: 100%;
  position: relative;
  @apply  flex flex-col;
  .body{
    flex: 1;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 50px;
    overflow: auto;
  }
  .actions{
    height: 50px;
    @apply mt-auto flex items-center;
  }
}

</style>
